<template>
  <div class="gank-home-page-container">
    <div class="gank-home-pic">
      <el-carousel height="560px">
        <el-carousel-item v-for="item in 3" :key="item">
        <img
          src="http://api.dujin.org/bing/1920.php"
          title="Bing每日一图"
        >
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="gank-home-content">
      <el-row :gutter="20">
        <el-col :span="8">
          <today-card
            :data="todayData.ios"
            subject="iOS"
            anchor="/List/iOS/"
          />
        </el-col>
        <el-col :span="8">
          <today-card
            :data="todayData.android"
            subject="安卓"
            anchor="/List/Android/"
          />
        </el-col>
        <el-col :span="8">
          <div class="gank-meizi">
            <el-card>
              <img
                :src="todayData.fuliPic[0].url"
                class="image"
              >
              <div>
                <span v-text="todayData.fuliPic[0].desc" />
                <div>
                  <time class="time">
                    {{ todayData.fuliPic[0].publishedAt }}
                  </time>
                  <el-button
                    type="text"
                    class="button"
                    @click="open"
                  >
                    查看原图
                  </el-button>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <today-card
            :data="todayData.app"
            subject="app"
          />
        </el-col>
        <el-col :span="8">
          <today-card
            :data="todayData.random"
            subject="瞎推荐"
          />
        </el-col>
        <el-col :span="8">
          <today-card
            :data="todayData.video"
            subject="休息视频"
            anchor="/List/休息视频/"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Service from '@/util/service';
import TodayCard from '@/components/todayCard/index';
import _ from 'lodash';
import dayjs from 'dayjs';
export default {
  name: 'Home',
  components: {
    TodayCard
  },
  data() {
    return {
      indexPic: [],
      todayData: {},
    };
  },
  mounted: function() {
    Service.getTodayData().then(res => {
        this.todayData = {
          android: res.results['Android'],
          ios: res.results['iOS'],
          random: res.results['瞎推荐'],
          app: res.results['App'],
          video: res.results['休息视频'],
          fuliPic: res.results['福利'] || {},
        };
        _.each(this.todayData, item => {
          item.length = 7;
          _.each(item, i => {
            i && (i.publishedAt = dayjs(i.publishedAt).fromNow());
          });
        });
      });
  },
  methods: {
    open(url) {
      window.open(this.todayData.fuliPic[0].url, '_blank');
    },
  },
};
</script>
<style lang="less" scoped>
.gank-home-page-container {
  height: 100%;
  .gank-home-pic {
    width: 100%;
    margin: 5px auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
    }
  }
  .gank-home-content {
    padding: 20px 0;
    .el-row {
      margin-bottom: 20px;
    }
    .gank-meizi {
      height: 600px;
      img {
        height: 100%;
        width: 100%;
      }
      .bottom {
        .button {
          float: right;
        }
        .time {
        }
      }
      .clearfix:before,
      .clearfix:after {
        clear: both;
      }
    }
  }
}
</style>
